<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>客户黑名单信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">

    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">  <#--引入头部和导航栏-->
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        黑名单信息
                    </div>
                    <div id="app">
                        <form class="form-inline bg-warning" role="form">
                            查询条件：
                            <div class="form-group">
                                <label class="sr-only" for="keyword">客户名或身份证号:</label>
                                <input type="text" class="form-control" id="keyword" name="keyword" placeholder="客户名或身份证号">
                            </div>
                            <button type="button" id="findBlackListUser" class="btn btn-success">查询客户</button>
                        </form>

                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr class="success">
                                    <td>序号</td>
                                    <td>客户姓名</td>
                                    <td>客户电话</td>
                                    <td>客户身份证号</td>
                                    <td>客户住址</td>
                                    <td>客户VIP等级</td>
                                    <@shiro.hasAnyRoles name="admin,manager,user"><td>操作</td></@shiro.hasAnyRoles>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="active" v-for="(item,index) in result">
                                    <td>{{index+1}}</td>
                                    <td>{{item.sname}}</td>
                                    <td>{{item.sphone}}</td>
                                    <td>{{item.scardId}}</td>
                                    <td>{{item.saddress}}</td>
                                    <td v-if="item.svip=='0'">普通客户</td>
                                    <td v-else-if="item.svip=='1'">青铜客户</td>
                                    <td v-else-if="item.svip=='2'">白银用户</td>
                                    <td v-else-if="item.svip=='3'">黄金用户</td>
                                    <td v-else="item.svip=='4'">钻石用户</td>
                                    <@shiro.hasAnyRoles name="admin,manager,user">
                                    <td class="bg-primary"><a href="#" @click="upBlackList(item.suId)">恢复到白名单</a></td>
                                    </@shiro.hasAnyRoles>
                                </tr>
                                </tbody>
                                <tr>
                                    <td colspan="3">
                                        <div id="pagenav"></div>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </div>
                </div>
        </section>
      <#include "foot.ftl"><#--引入底部-->
    </section>
<#------>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            result: []
        }
    });

    //查询黑名单客户数据
    var getUserPageBlackList = function (curr) {
        $.ajax({
            type: 'POST',
            url: '/user/getPageBlackList',
            dataType: 'json',
            data: {
                pageSize: 8,
                pageNum: curr || 1,
                keyword: $("#keyword").val()
            },
            success: function (msg) {
                app.result = msg.page;
                laypage({
                    cont: 'pagenav',//分页容器
                    pages: msg.totalPage,//总页数
                    skin: '#CD00CD',
                    first: '首页',
                    last: '末页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getUserPageBlackList(obj.curr);
                        }
                    }
                });
            }
        });
    }
    getUserPageBlackList();

    $('#findBlackListUser').click(function () {
        getUserPageBlackList();
    })

    var upBlackList=function (id) {
        layer.confirm('确认移出吗?', {
            btn: ['是', '否']
        }, function () {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: '/user/user_upBlackStatus',
                data: {
                    suId: id
                },
                success: function (msg) {
                    getUserPageBlackList();
                    layer.msg('成功移出', {icon: 6});
                }
            });
        }, function () {

        });
    }

</script>